<template>
  <div>
  <el-dialog
    title="工作日安排"
    :visible.sync="dialogVisible"
    :modal="true"
    :appendToBody="true"
    width="60%"
    v-dialog-drag
    top="5vh"
    @close="handleClose()"
    @open="handleOpen()"
  >
    <el-form
      :model="arrData"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <organizationCascader
        :clearable="false"
        :arrData="arrData"
        :disabledData="disabledData"
        :isAllList="true"
      ></organizationCascader>
      <el-form-item>
        <el-date-picker
          disabled
          v-model="arrData.dayStr"
          type="month"
          placeholder="选择年月"
          size="small"
          value-format="yyyy-MM"
          :clearable="false"
        >
        </el-date-picker>
     </el-form-item>
      <el-form-item class="query">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>

    <div v-for="item in userArrangement" :key="item.groupId" class="more-group" >
      <div class="group-time">
        <PartitionTitle :title='`${item.groupName}(${item.classesStartTime}-${item.classesStartTime})`'></PartitionTitle>
      </div>
      <userArrange :key="item.groupId" :arrData="arrData" :memberList="item.bizUserVos" @callbackMember="callbackMember($event,item)"></userArrange>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" :loading="saveloading" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
  </div>
</template>
<script>
  import organizationCascader from "@/views/components/organizationCascader";
  import userArrange from "@/views/components/userArrange";
  import {getUnSelectableUserByGroupId} from "@/api/team/group";
  import { getDaylyUserArrangement,saveDaylyUserArrangement } from "@/api/shifts/userChange";
  export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    arrData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      userDialog: {
        visible: true,
        key: null
      },
      disabledData:{
        factory:true,
        workshop:true,
        line:true
      },
      saveloading: false,
      userArrangement:[]
    };
  },
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val)
      },
      get() {
        return this.visible
      }
    }
  },
  methods: {
    handleOpen() {
      console.log(this.arrData,"this.arrDatathis.arrData")
      const parmas = {
        factoryDeptCode: this.arrData.factoryDeptCode,
        workshopCode: this.arrData.workshopCode,
        lineCode:this.arrData.lineCode,
        lineId:this.arrData.lineId,
        groupId: this.arrData.groupId || null,
        dayStr: this.arrData.dayStr
      }
      getDaylyUserArrangement(parmas)
      .then(res=>{
        if (res.code == 200 && res.data) {
          this.userArrangement = res.data;
        }
      }).catch(() => {
        this.userArrangement = []
      })
    },

    //确定保存人员调整
    handleSubmit() {
      this.saveloading = true;
      const groupArrangInfoVos = this.userArrangement.map(ele => {
        return {
          groupId:ele.groupId,
          bizUserVos:ele.bizUserVos.map(item => {
            return {
              username:item.username,
              workStationIds:item.workStationDtos?.length && item.workStationDtos.map(res => res.id).join()
            }
          })
        }
      })
      const parmas = {
        ...this.arrData,
        groupArrangInfoVos
      }
      saveDaylyUserArrangement(parmas).then(res => {
        if (res.code == 200) {
          this.msgSuccess("操作成功")
          this.dialogVisible = false
          this.$emit("submitted-success")
        } else {
          this.msgError(res.msg || "操作失败")
        }
        this.saveloading = false
      }).catch(() => {
        this.msgError("操作失败")
        this.saveloading = false
      })
    },

    //打开人员选择器
    openUserDialog(key) {
      getUnSelectableUserByGroupId(this.form.id).then(res => {
        this.disabledUser = res.data
      })
      this.userDialog.visible = true
      this.userDialog.key = key
    },

    //回调获取最新的班组成员
    callbackMember(list,item){
      console.log(list,item,"testlist")
      if(list?.length){
        item.bizUserVos = [...list]
      }
      console.log(this.userArrangement,"this.userArrangementthis.userArrangement")
    },

    handleClose() {
      this.saveloading = false
      this.userArrangement = []
    },

    handleQuery(){
      this.handleOpen()
    },
  },
  components:{
    organizationCascader,
    userArrange
  }
};
</script>
<style lang="scss" scoped>
.el-form {
  display: flex;
  flex-flow: wrap;
  .el-date-editor.el-input,
  .el-select {
    width: 100%;
  }
  .query{
    flex:1;
    text-align: right;
  }
}

.more-group{
  font-size:16px;
  margin-top:20px
}
.group-time{
  margin-bottom:10px
}
</style>
